<template>
  <section>
    <el-dialog :title="title"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :show-close="showClose"
               destroy-on-close
               :top="top"
               :width="width"
               :append-to-body="appendToBody"
               :center="center">
      <div slot="title"
           v-if="hideTitle">
        <slot name="title"></slot>
      </div>
      <slot />
      <span slot="footer"
            v-if="!hideFooter"
            class="dialog-footer">
        <el-button v-if="showCancelButton"
                   size="small"
                   @click="dialogVisible = false">{{cancelText}}</el-button>
        <el-button v-if="showConfirmButton"
                   type="primary"
                   size="small"
                   @click="confirm">{{confirmText}}</el-button>
      </span>
      <div class="dialog-footer">
        <slot name="footer" />
      </div>
    </el-dialog>
  </section>
</template>
<script>
export default {
  name: 'ym-dialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: false
    },
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: true
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    cancelText: {
      type: String,
      default: '关闭'
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    hideTitle: {
      type: Boolean,
      default: false
    },
    top: {
      default: "15vh"
    },
    width: {
      default: "60%"
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    center: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: this.visible
    }
  },
  watch: {
    visible (v) {
      this.dialogVisible = v
    },
    dialogVisible (v) {
      this.$emit('update:visible', v)
    },
  },
  methods: {
    confirm () {
      this.dialogVisible = false
      this.$emit('confirm')
    }
  }
}
</script>
<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
/deep/.el-dialog__header {
  padding: 10px 20px;
  .el-dialog__title {
    font-size: 16px !important;
  }
}
</style>
